<script setup lang="ts">

const tableData: Ref<Admin[]> = ref([])
const search = ref('')

function getAdminList() {
  cFetch<Admin[]>('/admin/list', {
    auth: true,
    defaultOpts: {
      method: "GET",
    }
  }).then(res => {
    if(res.code===200) tableData.value = res.data

  })
}

const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.username.toLowerCase().includes(search.value.toLowerCase())
    )
)

const handleDelete = (index: number, row: Account) => {
  ElMessageBox.confirm(
      `确认删除管理员 ${row.username} 以及其所有信息？删除后不可撤回！`,
      '警告',
      {
        confirmButtonText: '彻底删除',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        confirmButtonClass: 'red-confirm-btn'
      }
  )
      .then(() => {
        cFetch('/admin/del', {
          auth: true,
          defaultOpts: {
            method: "DELETE",
            query: {
              username: row.username
            }
          }
        }).then(res => {
          if (res.code === 200) {
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
            getAdminList()
          }
        })

      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消操作',
        })
      })
  // console.log(index, row)
}

onMounted(function () {
  getAdminList()
})
</script>

<template>
  <div>

    <el-table :data="filterTableData" style="width: 100%" height="85vh">
      <el-table-column label="用户名" prop="username"/>
      <el-table-column label="创建日期" prop="createdTime"/>
      <el-table-column label="创建人" prop="createdBy"/>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="Type to search"/>
        </template>
        <template #default="scope">

          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
          >
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<style lang="scss">
.red-confirm-btn {
  @extend .red-btn
}
</style>